<template>
  <a-modal
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="1200px"
  >
    <template #title> 供应商产品总览 </template>
    <div>
      <a-table
        row-key="id"
        :row-selection="rowSelection"
        v-model:selectedKeys="selectedKeys"
        @select="onSelect"
        :columns="columns"
        :data="data"
        :pagination="false"
      >
        <template #columns>
          <a-table-column
            v-for="item in columns"
            :title="item.title"
            :data-index="item.code"
            :key="item.code"
            :width="200"
            align="center"
          >
            <!-- 数量 -->
            <template v-if="item.code === 'authState'" #cell="{ record }">
              <span>{{ record.authState === 2 ? '认证合格' : '无' }}</span>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, watchEffect, onMounted, ref } from 'vue';
  import { localGetUserInfo } from '@/utils/localStorage/account';
  import { getPurchaseProductNumber } from '@/api/buy-management/buy-material/index';

  const props = withDefaults(
    defineProps<{
      code: any;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  const rowSelection = reactive({
    type: 'radio',
  });

  const data = ref([]);
  const selectedKeys = ref([]);
  // 获取数据
  const getData = async () => {
    try {
      const res = await getPurchaseProductNumber({ number: props.code });
      data.value = res;
    } catch (error: unknown) {
      console.log(error);
    }
  };

  const columns = [
    {
      title: '物料编码',
      code: 'number',
    },
    {
      title: '物料名称',
      code: 'name',
    },
    {
      title: '型号规格',
      code: 'spec',
    },
    {
      title: '物料指导单价',
      code: 'singlePrice',
    },
    {
      title: '供应商名称',
      code: 'supplierName',
    },
    {
      title: '采购单位',
      code: 'basicUnitName',
    },
    {
      title: '供应商编号',
      code: 'supplierNumber',
    },
  ];

  const emit = defineEmits(['update:visible', 'awardedSupplier']);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible, '');
    },
  });

  const SelectDate = ref([]);
  const onSelect = (e: number, keys: number, val: any) => {
    SelectDate.value[0] = val;
  };

  watchEffect(() => {
    if (props.visible) {
      getData();
      selectedKeys.value = [];
      SelectDate.value = [];
    }
  });

  const handleOk = () => {
    emit('awardedSupplier', SelectDate.value);
  };
</script>

<style scoped lang="less"></style>
